<template>
  <div id="home" @contextmenu.stop.prevent="handleMaskRightClick">
    <GlobalBackgroundPicture />
    <GlobalMaskLayer @handle-mask-click="handleMaskClick" @handle-mask-right-click="handleMaskRightClick">
      <HeadBar />
      <TimeOfText />
      <ZoomTransition>
        <SearchBar v-if="!useStore.isAppMode" />
        <Shortcuts v-else-if="useStore.isAppMode" />
      </ZoomTransition>
    </GlobalMaskLayer>
    <ShareSentence v-show="useStore.isMask" v-if="useStore.shareSentence !== '禁用'" />
    <FootBar />
    <UserinfoDetail />
    <Setting />
    <HotSearchSwitching />
    <ChatOnline />
    <HistorySearch />
    <MusicSearchList />
    <MusicPlayList />
    <MusicBar />
  </div>
</template>

<script setup>
import GlobalBackgroundPicture from "@/components/GlobalBackgroundPicture.vue";
import GlobalMaskLayer from "@/components/GlobalMaskLayer.vue";
import { fetchAllUserinfo } from "@/api/user";
import { onBeforeMount, onMounted } from "vue";
import { useHomeStore } from "@/stores/home";
import HeadBar from "./childComponents/HeadBar.vue";
import FootBar from "./childComponents/FootBar.vue";
import TimeOfText from "./childComponents/TimeOfText.vue";
import SearchBar from "./childComponents/SearchBar.vue";
import Shortcuts from "./childComponents/Shortcuts.vue";
import ShareSentence from "./childComponents/ShareSentence.vue";
import UserinfoDetail from "./childComponents/UserinfoDetail.vue";
import Setting from "./childComponents/Setting.vue";
import MusicBar from "./childComponents/MusicBar.vue";
import MusicSearchList from "./childComponents/MusicSearchList.vue";
import MusicPlayList from "./childComponents/MusicPlayList.vue";
import ZoomTransition from "@/components/ZoomTransition.vue";
import HotSearchSwitching from "@/components/HotSearchSwitching.vue";
import HistorySearch from "@/components//HistorySearch.vue"
import ChatOnline from "@/components/ChatOnline.vue";
const useStore = useHomeStore();

onMounted(() => {
  if (useStore.token.length !== 0 && useStore.isLoaded === false) {
    fetchAllUserinfo().then(results => {
      const [userinfo, setting, shortcuts, customWallpaper] = results
      if (userinfo.status === 'fulfilled' && userinfo.value.code === 20000) {
        useStore.userinfo = userinfo.value.retData
      }
      if (setting.status === 'fulfilled' && setting.value.code === 20000) {
        const settings = setting.value.retData
        useStore.$patch({
          shareSentence: settings.shareSentence,
          showWeather: settings.showWeather,
          timeType: settings.timeType,
          darkMode: settings.darkMode,
          smoothMode: settings.smoothMode,
          searchResultsOption: settings.searchResultsOption,
          currentWallpaperUrl: settings.wallpaper,
        })
      }
      if (shortcuts.status === 'fulfilled' && shortcuts.value.code === 20000) {
        useStore.shortcuts = shortcuts.value.retData
      }
      if (customWallpaper.status === 'fulfilled' && customWallpaper.value.code === 20000) {
        useStore.customWallpapers = customWallpaper.value.retData
      }
      useStore.isLoaded = true
    })
  }
});

onBeforeMount(() => {
  window.baidu = {
    sug: (data) => {
      useStore.searchResults = data.s;
      useStore.currentSelectedSearchResultIndex = -1;
    },
  };
});

/**
 * 点击遮罩层
 */
const handleMaskClick = () => {
  useStore.isMask = false
  useStore.isSearchMode = false
  useStore.isAppMode = false
}

/**
 * 处理#home的右键事件
 */
const handleHomeRightClick = () => {
  useStore.isMask = true
  useStore.isAppMode = true
  // console.log('右键点击了#Home层')
}

/**
 * 处理遮罩层的右键事件
 */
const handleMaskRightClick = () => {
  if (useStore.isMask) {
    handleMaskClick()
    // console.log('右键点击了遮罩层')
  } else {
    handleHomeRightClick()
  }
}
</script>

<style lang="less" scoped>
#home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
}
</style>